<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建套餐</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" charset="utf-8"
    src="${ctx}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
    src="${ctx}/ueditor/ueditor.all.min.js">
    
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
    src="${ctx}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8"
    src="${ctx}/ueditor/third-party/9fm/9fm.v1.js"></script>

<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
</head>
<body>
    <style>
.inline {
    display: inline-block
}

.table-div {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px;
}

.table-group td {
    padding: 6px
}
</style>
    <form id="form1" class="form-horizontal"
        action="${ctx}/TblComboInfo/save.htm" method="post"
        enctype="multipart/form-data">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label item ">套餐标题：</label>
            <div class="col-sm-6  ">
                <input type="text" class="form-control " id="comboTitle"
                    name="comboTitle" value="${mealDetail.comboTitle}" /> <input
                    type="hidden" class="form-control " id="comboId" name="comboId"
                    value="${mealDetail.comboId}" /> <input type="hidden"
                    class="form-control " id="comboStatus" name="comboStatus" value="0" />
            </div>
            <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
        </div>

        <div class="form-group">
            <label for="name" class="col-sm-2 control-label item ">套餐图：</label>
            <div class="col-sm-6  ">
                <input type="file" id="cfile" name="cfile" class="upload"
                    accept="image/*" /> <img id="banimg1" class="banimg1" width="100"
                    height="100" src="${mealDetail.comboLogo}" />
                <div class="colortxt" style="color: red">支持jpg/jpeg/png格式，建议尺寸148*148</div>
            </div>
            <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
        </div>

        <div class="form-group">
            <label for="name" class="col-sm-2 control-label item ">简介：</label>
            <div class="col-sm-6  ">
                <textarea class="form-control" rows="3" id="comboAbstract"
                    name="comboAbstract">${mealDetail.comboAbstract}</textarea>
            </div>
            <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
        </div>


        <div class="form-group">
            <label for="name" class="col-sm-2 control-label item ">套餐选项卡：</label>
            <div class="col-sm-9  ">
                <c:forEach items="${extendMealDetail }" var="list"
                    varStatus="status">
                    <div class="table-div delXuan" id="delxuan1">
                        <table class="table-group">
                            <thead>${list.tblName }
                                <c:if test="${fn:length(extendMealDetail) gt 1  }">
                                    <c:if test="${status.index == 1  }">
                                        <a type onclick="hideXuan1()" id="delxuan1">删除</a>
                                    </c:if>
                                </c:if>
                            </thead>
                            <tbody>
                                <tr colspan="2" class="form-group">
                                    <td width='26%'><span class="help-block"
                                        style="color:#FF9966">*</span>市场价</td>
                                    <td width='74%'><input type="text"
                                        class="form-control marketPrice"
                                        id="marketPrice${status.index}"
                                        name="marketPrice${status.index}" value="${list.marketPrice }" /></td>
                                </tr>
                                <tr colspan="2" class="form-group">
                                    <td><span class="help-block" style="color:#FF9966">*</span>套餐价
                                    </td>
                                    <td><input type="text" class="form-control comboPrice"
                                        id="comboPrice${status.index}"
                                        name="comboPrice${status.index}" value="${list.comboPrice }" />
                                    </td>
                                </tr>
                                <tr colspan="2" class="form-group">
                                    <td><input type="hidden" class="form-control" id="tblName"
                                        name="tblName" value="套餐A" /> <span class="help-block"
                                        id="valierr" style="color:#FF9966">*</span>${list.tblName}详情</td>
                                    <td>
                                        <div id="divContentTidA">
                                            <input class="form-control  taocanxiangqingA"
                                                id="tblIntroduce${status.index}"
                                                name="tblIntroduce${status.index}"
                                                value='${list.tblIntroduce }'
                                                style="backgroung:#fff;border:0;opacity:0;width:0;height:0" />
                                            <!--style给定宽度可以影响编辑器的最终宽度-->
                                            <script type="text/plain" id="myEditor1${status.index }"
                                                style="width:480px;height:100px;"></script>

                                            <script type="text/javascript">
                                                UE.getEditor( 'myEditor1${status.index }') .addListener( 'blur', function() {
                                                                    //失去焦点，做一次保存操作
                                                    $("#tblIntroduce${status.index}").val(UE.getEditor('myEditor1${status.index }').getContent());
                                                                });
                                                UE.getEditor('myEditor1${status.index }').ready(
                                                                function() {UE.getEditor('myEditor1${status.index }').setContent('${list.tblIntroduce }');
                                                                });
                                            </script>
                                            <div id="errmsg"></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <c:if test="${fn:length(extendMealDetail) eq 1  }">
                            <a type onclick="showXuan()" id="addxuan">添加选项卡</a>
                        </c:if>
                        <a type onclick="showXuan()" id="addxuan" style="display:none"; >
                            添加选项卡</a>
                    </div>
                </c:forEach>
            </div>
        </div>
        <div class=" form-group " id="showXuan"   style="display:none";>
            <a type onclick="hideXuan()" id="delxuan"> 删除 </a>
             <label for="name" class="col-sm-2 control-label item ">&nbsp;</label>
            <div class="col-sm-9 ">
                <div class="table-div ">
                    <table class="table-group">
                        <thead>套餐B</thead>
                        <tbody>
                            <tr colspan="2" class="form-group">
                                <td width='26%'>
                                    <span class="help-block" style="color:#FF9966">*</span>市场价
                                </td>
                                <td width='74%'><input type="text" class="form-control marketPrice" id="marketPriceB"
                                    name="marketPriceB" /></td>
                            </tr>
                            <tr colspan="2" class="form-group">
                                <td><span class="help-block" style="color:#FF9966">*</span>套餐价
                                </td>
                                <td><input type="text" class="form-control comboPrice"
                                    id="comboPriceB" name="comboPriceB" /></td>
                            </tr>
                            <tr colspan="2" class="form-group">
                                <td><input type="hidden" class="form-control " id="tblName"
                                    name="tblName" value="" /> <span class="help-block"
                                    id="valierr" style="color:#FF9966">*</span>套餐B详情</td>
                                <td>
                                    <div>
                                        <input class="form-control taocanxiangqingA"
                                            id="tblIntroduceB" name="tblIntroduceB"
                                            style="backgroung:#fff;border:0;opacity:0;width:0;height:0" />
                                        <!--style给定宽度可以影响编辑器的最终宽度-->
                                        <script type="text/plain" id="myEditor2"
                                            style="width:480px;height:100px;"></script>
                                        <div id="errmsg"></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="form-group" id="divContent">
            <label for="name" class="col-sm-2 control-label item wid1">套餐说明：</label>
            <div class="col-sm-9 wid2">
                <input class="form-control " name="comboIntroduce" id="comboIntroduce" value='${mealDetail.comboIntroduce }'
                 style="backgroung:#fff;border:0;opacity:0;width:0;height:0" />
                <!--style给定宽度可以影响编辑器的最终宽度-->
                <script type="text/plain" id="myEditor3"
                    style="width:480px;height:100px;"></script>
                <div id="errmsg"></div>
            <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
            </div>
        </div>
        <div class="form-group">
            <div class=" col-sm-10">
                <span id="error-text" style="color: #FF0000;"></span>
            </div>
        </div>
    </form>


    <script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
    <script src="${ctx}/rs/js/messages_zh.min.js"></script>
    <script type="text/javascript">
    
    $.validator.addMethod("codeType", function(value, element) {
        return this.optional(element) || /^(([1-9]\d{0,9})|0)(\.\d{1,2})?$/.test(value);
    }, "请输入正确的金额!");
    $.validator.addMethod("limitType", function(value, element) {
        var str = value.substr(value.lastIndexOf(".")).toLowerCase();
        return this.optional(element) || /.(png|jpg)$/.test(str);
    }, "上传文件格式不正确!");

    function showXuan() {
            $("#showXuan").show();
            $("#addxuan").hide();
        }
        function hideXuan() {
            $("#addxuan").show();
            $("#showXuan").hide();
        }
        function hideXuan1() {
            $(".table-div").eq(1).remove();
            $(".delXuan").eq(1).hide();
            $("#addxuan").show();
        }

        
        var form = $('#form1');
        form.validate({
            rules : {
                comboTitle : {
                    maxlength : 30,
                    required : true
                },
                cfile : {
                    limitType : "limitType"
                },
                comboAbstract : {
                    maxlength : 60,
                    required : true
                },
                marketPrice0 : {
                    min : 0,
                    max:99999999.99,
                    codeType : "codeType",
                    required : true

                },
                marketPrice1 : {
                    min : 0,
                    max:99999999.99,
                    codeType : "number",
                    required : true

                },
                marketPriceB : {
                    min : 0,
                    max:99999999.99,
                    codeType : "number",
                    required : true

                },
                comboPrice0 : {
                    min : 0,
                    max:99999999.99,
                    number : "number",
                    required : true

                },
                comboPrice1 : {
                    min : 0,
                    max:99999999.99,
                    number : "number",
                    required : true

                },
                comboPriceB : {
                    min : 0,
                    max:99999999.99,
                    codeType : "codeType",
                    required : true
                },
                tblIntroduce0 : {
                    required : true
                },
                tblIntroduce1 : {
                    required : true
                },
                tblIntroduceB : {
                    required : true
                },
                comboIntroduce : {
                    required : true
                }
            },
            highlight : function(element) {
                $(element).closest('.form-group').removeClass('success')
                        .addClass('error');
            },
            success : function(element) {
                element.text('OK!').addClass('valid').closest('.form-group')
                        .removeClass('error').addClass('success');
            }
        });

        function valiSubmit() {
            if (form.valid()) {
                var jsonData = [];
                $(".table-div ").each(function(i, item) {
                var marketPrice = $(this).find(".marketPrice").val();
                var comboPrice = $(this).find(".comboPrice").val();
                var tblIntroduce = $(this).find('.taocanxiangqingA').val();
                var tblName = $(this).find("#tblName").val();
                    var j = {};
                    j.marketPrice = marketPrice;
                    j.comboPrice = comboPrice;
                    j.tblIntroduce = tblIntroduce;
                    j.tblName = tblName;
                    jsonData.push(j);
                });
                var options = {
                    dataType : "json",
                    data : {
                        data : JSON.stringify(jsonData)
                    },
                    beforeSubmit : function() {
                        $(".unable").show();
                    },
                    success : function(result) {
                        if (!$('.unable').is(':hidden')) {
                            $(".unable").hide();
                        }
                        if (result) {
                            // 普通消息提示条
                            bootstrapQ.msg({
                                msg : '发布成功！',
                                type : 'success',
                                time : 2000
                            });
                            //触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
                            $("button.bsok").click();
                        } else {
                            bootstrapQ.msg({
                                msg : '发布失败！',
                                type : 'danger',
                                time : 2000
                            });
                        }
                    },
                    error : function(result) {
                        if (!$('.unable').is(':hidden')) {
                            $(".unable").hide();
                        }
                        bootstrapQ.msg({
                            msg : '发布失败！',
                            type : 'danger',
                            time : 2000
                        });
                    }
                };
                form.ajaxSubmit(options);
                return false;
            }
        }

        /** ue编辑器 start 套餐详情B*/
        
        var ue2 = UE.getEditor('myEditor2');
        ue2.addListener('blur', function() {
            //失去焦点，做一次保存操作
            $('input[name="tblIntroduceB"]').val(ue2.getContent());
        });
        
        //套餐说明
        var ue3 = UE.getEditor('myEditor3');
        ue3.addListener('blur', function() {
            //失去焦点，做一次保存操作
            $("#comboIntroduce").val(ue3.getContent());
        });
        ue3.ready(function() {
            ue3.setContent('${ mealDetail.comboIntroduce }');
         });
    </script>
</body>
</html>